<template>
  <div class="app">
    <div>
      <mt-header title="世界这么大，出去走走吧。" style="background-color: rgba(0,0,0,0);">
        <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
      </mt-header>
    </div>
    <div class="login_fields">
      <div class="login_fields__user">
        <input id="username" class="text" name="login" placeholder="Name" maxlength="16" type="text" autocomplete="off" value="" style="color:#ffffff;font-size:20px;">
        <input id="password" class="text" name="login" placeholder="password" maxlength="16" type="password" autocomplete="off" value="" style="color:#ffffff;font-size:20px;">
        <br>
        <div class="zc">
          <img @click="register()" src="../assets/images/tool/zhuce.png" />
          <img @click="Login()" src="../assets/images/tool/login.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import { Loadmore } from "mint-ui";
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {};
  },
  created() {
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  methods: {
    goBack() {
      this.$store.dispatch("showTabbar", { boolean: "0" });
      history.go(-1);
    },
    register() {
      this.$router.push({ path: "/register" });
    },
    Login() {
      let username = $("#username").val();
      let password = $("#password").val();
      console.log(username, password);
      axios({
        method: "post",
        url: "/api/hy/login.htm",
        params: {
          login_username: username,
          login_password: password
        }
      }).then(res => {
        res = res.data;
        if (res.zt === "true") {
          console.log(res);
          //global_id 为全局标记id 例如：展示或者隐藏模块
          localStorage.setItem("global_id", JSON.stringify(res.data.id));
          //global_members_id 为会员账号的全局使用id 例如：请求接口传参用
          localStorage.setItem(
            "global_members_id",
            JSON.stringify(res.data.id)
          );

          localStorage.setItem("global_username", JSON.stringify(res.data.mc));
          let global_id = JSON.parse(localStorage.getItem("global_id"));
          console.log(global_id);
          this.$router.push({ path: "/me" });
          this.$store.dispatch("showTabbar", { boolean: "0" });
          Indicator.close();
          let instance = Toast({
            message: "登录成功"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        } else {
          Indicator.close();
          let instance = Toast({
            message: "登录失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    }
  }
};
</script>

<style scoped>
.app {
  background: url(../assets/images/tool/login.jpg) no-repeat;
  background-size: 100% 100%;
  height: 100%;
}

.login_fields {
  position: relative;
  height: calc(100% - 40px);
  text-align: center;
}
.login_fields__user {
  position: absolute;
  left: 0;
  top: 60%;
}
.icon {
  position: absolute;
  z-index: 1;
  left: 36px;
  top: 8px;
  opacity: 0.5;
}
.text {
  width: 130px;
  margin-top: -2px;
  background: rgba(57, 61, 82, 0);
  padding: 10px 65px;
  border: none;
  border-bottom: 2px solid #ffffff;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}

.zc {
  margin-top: 12px;
}

.zc img:nth-child(1) {
  margin-right: 40px;
}
</style>
